import React, {useEffect, useState} from "react";
import {Button, Card, Col, Form, Input, message, Modal, Row} from "antd";
import {doctor, setToken} from "../utils/tools";
import {useNavigate} from "react-router";
import {getNewsFile, loginApi} from "../services/auth";
import {EyeInvisibleOutlined, EyeTwoTone} from "@ant-design/icons";
import {type} from "@testing-library/user-event/dist/type";

export default function Login() {
    const [id, setId] = useState(1.1);
    const [open, setOpen] = useState(false);
    const navigate = useNavigate();
    const [url, setUrl] = useState("");
    const [modalText, setModelText] = useState("");
    const ok = (<a href={`${url}`}>下载最新版</a>);
    const modal = (
        <Modal
            title="Title"
            open={open}
            onOk={() => {
                setOpen(false);
            }}
            okType={ok}
            // confirmLoading={confirmLoading}
            onCancel={() => {
                setOpen(false);
            }}
        >
            <p>{modalText}</p>
        </Modal>
    )
    useEffect(() => {
        getNewsFile().then(res => {
            if (res.success && res.data.id !== id) {
                console.log('res.data.id',typeof(res.data.id));
                console.log('id',typeof (id));
                setOpen(() => {
                    setModelText(() => {
                        setUrl(res.data.name);
                        return "检测到最新版本,是否下载更新!";
                    });
                    return true;
                });

            }
        })
    }, [])
    return (
        <Row style={{width: '100vw', height: '100vh',}}>
            <Col
                md={{
                    span: 8,
                    push: 8,
                }}
                xs={{
                    span: 22,
                    push: 1,
                }}
            >
                <img src={doctor} alt="医生" style={{
                    display: 'block',
                    margin: '20px auto',
                    borderRadius: '16px',
                    width: '100px'
                }}/>
                <Card title={'好大夫平台管理系统'}>
                    <Form
                        labelCol={{
                            md: {
                                span: 4
                            }
                        }}
                        onFinish={async (values) => {
                            console.log(values);
                            const res = await loginApi(values);
                            console.log(res);
                            if (res.success) {
                                message.success(res.message);
                                setToken(res.data);
                                navigate('/admin/dashboard')
                            } else {
                                message.error(res.message);
                            }
                            // message.success('登陆成功');
                            // navigate('/admin/dashboard');
                        }}
                    >
                        <Form.Item
                            label={"用户名"}
                            name={'username'}
                            rules={[{
                                required: true,
                                message: '请输入用户名!'
                            }]}>
                            <Input placeholder={"请输入用户名!"}></Input>
                        </Form.Item>
                        <Form.Item
                            rules={[{
                                required: true,
                                message: '请输入密码!'
                            }]}
                            name={'pwd'}
                            label={"密码"}>
                            <Input.Password
                                placeholder={"请输入密码!"}
                                iconRender={(visible) => (visible ? <EyeTwoTone/> : <EyeInvisibleOutlined/>)}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button htmlType={'submit'} type={'primary'} style={{
                                display: 'block',
                                margin: '8px auto',
                                width: '20vw'
                            }}>登录</Button>
                        </Form.Item>
                    </Form>
                    <Modal
                        title="检测更新"
                        open={open}
                        onOk={() => {
                            window.location.href=url;
                            setOpen(false);
                        }}
                        // confirmLoading={confirmLoading}
                        onCancel={() => {
                            setOpen(false);
                        }}
                    >
                        <p>{modalText}</p>
                    </Modal>
                </Card>
            </Col>
        </Row>
    )
}